<ion-view title="新增/修改嘱托" hide-nav-bar="true">
    <ion-content>
        <div class="container">
            <div class="entrust-create-screen padding">
                <p class="entrust-create-flow" style="margin: 0;">提示：未添加进班级的宝宝无法嘱托哦!</p>
                <div class="student-box" style="height: 300px;width: 100%;">
                    <div ng-show="vm.studentList.length < 1">
                        <p >您还未绑定宝宝呢！</p>
                    </div>
                    <div class="row row-wrap" ng-show="vm.studentList.length > 0">
                        <div class="col col-50" ng-repeat="item in vm.studentList track by $index">
                            <div class="card card-facebook margin-0" data-studentId="{{item.memberId}}" data-studentName="{{item.memberName}}" data-studentAvatarPath="{{item.avatarPath}}" data-teacherName="{{item.teacherName}}">
                                <div class="item item-avatar-center">
                                    <img ng-src="{{item.avatarPath}}">
                                    <h2 class="ng-binding">{{item.memberName}}</h2>
                                </div>
                                <div class="item item-divider ng-binding">班主任：{{item.teacherName}}</div>
                                <div class="choose-chile-div-choose-icon ion ion-checkmark"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <button class="button button-full ion ion-checkmark" style="background: rgba(218, 224, 223, 0.53);color: #000;font-size: 3rem;"
                        id="choose-student-btn"></button>
            </div>
            <div class="content">
                <div class="padding">
                    <p class="entrust-create-flow" ng-show="!vm.isEdit"><label>01</label>&nbsp;&nbsp;添加要嘱托的宝宝：</p>
                    <p class="entrust-create-flow" ng-show="vm.isEdit"><label>01</label>&nbsp;&nbsp;嘱托宝宝：</p>
                    <div class="row row-wrap">
                        <div class="col col-50" ng-repeat="item in vm.chooseStudentList track by $index">
                            <div class="card card-facebook margin-0">
                                <div class="item item-avatar-center">
                                    <img ng-src="{{item.studentAvatarPath}}">
                                    <h2 class="ng-binding">{{item.studentName}}</h2>
                                </div>
                                <div class="item item-divider ng-binding">
                                    班主任：{{item.teacherName}}
                                </div>
                                <div ng-show="!vm.isEdit" class="choose-chile-div-close ion ion-close" ng-click="removeStudent($index)"></div>
                            </div>
                        </div>
                        <div class="col col-50" ng-show="!vm.isEdit">
                            <div class="card card-facebook margin-0">
                                <div class="item item-avatar-center" id="choose-child-btn">
                                    <i class="ion ion-plus" style="font-size: 1.5rem;"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="padding">
                    <p class="entrust-create-flow"><label>02</label>&nbsp;&nbsp;输入嘱托详情：</p>
                    <div class="row row-wrap">
                        <div class="col">
                            <label>重要嘱托：</label>
                            <label class="toggle" style="float: right;">
                                <input type="checkbox" ng-model="vm.entrust.importantState" name="importantState">
                                <div class="track"><div class="handle"></div></div>
                            </label>
                        </div>
                    </div>
                    <div class="row row-wrap">
                        <div class="col">
                            <label>语音嘱托：</label>
                            <label class="toggle" style="float: right;">
                                <input type="checkbox" ng-model="vm.entrustUseAudio" name="entrustType">
                                <div class="track"><div class="handle"></div></div>
                            </label>
                        </div>
                    </div>
                    <hr/>
                    <div class="row row-wrap">
                        <div class="col">
                            <div ng-show="vm.entrustUseAudio == true" id="audio-box" ng-class="{true: 'hide', false: 'show'}[vm.isEdit]">
                                <div style="width:100%; text-align: center;" class="entrust-voice">
                                    <div class="spinner">
                                        <div class="bounce4"></div>
                                        <div class="bounce3"></div>
                                        <div class="bounce2"></div>
                                        <div class="bounce1"></div>
                                    </div>
                                    <div id="record-btn" style="display: inline;font-size: 88px;"><i class="fa fa-microphone"></i></div>
                                    <div class="spinner">
                                        <div class="bounce1"></div>
                                        <div class="bounce2"></div>
                                        <div class="bounce3"></div>
                                        <div class="bounce4"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="record-play-div" ng-class="{true: 'show', false: 'hide'}[vm.isEdit]">
                                <div class="entrust-audio-play-box">
                                    <div class="entrust-audio-play"></div>
                                    <div class="play-button paused">
                                        <div class="left"></div>
                                        <div class="right"></div>
                                        <div class="triangle-1"></div>
                                        <div class="triangle-2"></div>
                                    </div>
                                    <audio src="{{vm.entrust.entrustAudioPath}}" controls style="display: none;"></audio>
                                </div>
                                <p ng-click="removeAudio()" style="font-size: 2rem;text-align: center;"><i class="ion ion-trash-a"></i></p>
                            </div>
                            <div ng-show="vm.entrustUseAudio == false">
                                <label class="item item-input text" style="padding: 0px;border: 0px;">
                                    <textarea placeholder="请输入嘱托内容" rows="4" ng-model="vm.entrust.entrustContent" ng-trim="false"
                                              maxlength="1500" ng-Required="true" name="description"
                                              style="resize:none;border: 0px;padding: 5px 10px;font-size: 1rem;">
                                    </textarea>
                                </label>
                                <span class="padding pull-right">还能输入{{150 - vm.entrust.entrustContent.length}}个字</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="padding">
                    <button class="button button-full" style="background: #55ABD4;color: #fff;" ng-click="submitEntrust()">
                        提交
                    </button>
                </div>
            </div>
        </div>
    </ion-content>
</ion-view>